<template>
	<div class="chan-pin">
		<!-- 当季推荐 -->
		<div class="title">当季推荐</div>
		<div class="today-box">
			<div class="today-item" v-for="(i, index1) in todayList" :key="index1">
				<el-image :src="i.img" fit="cover" />
				<p>{{ i.name }}</p>
			</div>
		</div>

		<!-- 限时优惠 -->
		<div class="title">限时优惠</div>
		<div class="limit-box">
			<div class="limit-item" v-for="(i, index2) in limitList" :key="index2">
				<el-image :src="i.img" fit="cover" />
				<p>{{ i.name }}</p>
			</div>
		</div>

		<!-- 购买 -->
		<div class="title">购买</div>
		<div class="box">
			<div class="people-list">
				<div @click="activeFoodIndex = index" :class="['name-item', { active: activeFoodIndex == index }]" v-for="(item, index) in list" :key="index">
					{{ item.name }}
				</div>
			</div>

			<div class="people-list-item">
				<div class="people-item" v-for="(item, index) in list[activeFoodIndex].list" :key="index">
					<el-image class="cover" v-if="item.img" :src="item.img" fit="cover" />
					<!-- <div class="banner-box" v-else>
						<el-carousel height="320px" arrow="always" indicator-position="none">
							<el-carousel-item v-for="(bannerImg, index) in item.bannerList" :key="index">
								<el-image class="b-img" fit="cover" :src="bannerImg" />
							</el-carousel-item>
						</el-carousel>
					</div> -->
					<div class="info">
						<div class="title">
							<span>{{ item.name }}</span>
							<div class="good">
								<img src="../../../assets/images/antOutline-star.svg" alt="" />
								<img src="../../../assets/images/antOutline-star.svg" alt="" />
								<img src="../../../assets/images/antOutline-star.svg" alt="" />
								<img src="../../../assets/images/antOutline-star.svg" alt="" />
								<img src="../../../assets/images/antOutline-star.svg" alt="" />
							</div>
						</div>
						<div class="desc">
							<!-- {{ item.desc }} -->
						</div>
						<div class="price">
							<span>月售{{ item.sales }}</span>
							<el-button class="btn" color="#8A1313">
								<a :href="item.url" target="_blank" style="color: #ffffff; text-decoration: none"> 立即购买 </a>
							</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="ChanPin">
import { useBaseStore } from "@/store/base";
const { cosPrefix } = useBaseStore();
const todayList = [
	{
		name: "寻味武隆 火炉铺碗碗羊肉羊杂",
		img: cosPrefix + "three-level/xiangqu/ganchangtian/dangjituijian/1.png"
	},
	{
		name: "武隆生态米",

		img: cosPrefix + "three-level/xiangqu/ganchangtian/dangjituijian/2.png"
	},
	{
		name: "仙女红茶武隆印记",

		img: cosPrefix + "three-level/xiangqu/ganchangtian/dangjituijian/3.png"
	},
	{
		name: "武隆老腊肉",

		img: cosPrefix + "three-level/xiangqu/ganchangtian/dangjituijian/4.png"
	}
];
const limitList = [
	{
		name: "腊味礼盒",
		img: cosPrefix + "three-level/xiangqu/ganchangtian/xianshiyouhui/1.png"
	},
	{
		name: "武隆石磨苕粉 ",

		img: cosPrefix + "three-level/xiangqu/ganchangtian/xianshiyouhui/2.png"
	},
	{
		name: "老鹰茶",

		img: cosPrefix + "three-level/xiangqu/ganchangtian/xianshiyouhui/3.png"
	}
];

// 购买
const activeFoodIndex = ref(0);
const list = [
	{
		name: "特色白酒",
		list: [
			{
				id: 9,
				name: "仙女村酒",
				desc: ``,
				unit: "",
				img: cosPrefix + "three-level/xiangqu/ganchangtian/goumai/tesebaijiu/1.1.jpg",
				sales: 180
			},
			{
				id: 3,
				name: "重庆市武隆区江口酒业有限公司",
				desc: ``,
				unit: "",
				img: cosPrefix + "three-level/xiangqu/ganchangtian/goumai/tesebaijiu/2.jpg",
				sales: 65,
				url: ""
			}
		]
	},
	{
		name: "农产品",
		list: [
			{
				id: 1,
				name: "寻味武隆",
				desc: `仙女山寻梦园蓝莓产地位于荆竹村杨柳组，采摘时间为每年的6月中旬至8月底`,
				unit: "50-80/斤",
				img: cosPrefix + "three-level/xiangqu/ganchangtian/goumai/nongchanpin/1.png",
				sales: 180
			},
			{
				id: 2,
				name: "重庆市武隆区三农产业联合会",
				desc: `老荫茶，属樟科木本植物，老荫茶是一种树叶，并非真正的茶叶，多生长在高山密林之间，其树大而叶茂`,
				unit: "80/斤左右",
				img: cosPrefix + "three-level/xiangqu/ganchangtian/goumai/nongchanpin/2.png",
				sales: 65
			}
		]
	},
	{
		name: "水果",
		list: [
			{
				id: 5,
				name: "仙女山葡萄仙坛五龙珠葡萄",
				desc: `脱毒种薯是指马铃薯种薯经过一系列技术措施清除薯块体内的病毒后，获得的无病毒或极少有病毒侵染的种薯`,
				unit: "50-80/斤",
				img: cosPrefix + "three-level/xiangqu/ganchangtian/goumai/shuiguo/1.jpg",
				bannerList: [
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/1.png",
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/2.png",
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/3.png",
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/4.png"
				],
				sales: 66
			},
			{
				name: "寻梦园蓝莓",
				desc: `葡萄仙坛位于荆竹村杨柳组，有10余个品种。采摘时间为每年的7月下旬至10月中旬`,
				unit: "20-50/斤",
				img: cosPrefix + "three-level/xiangqu/ganchangtian/goumai/shuiguo/2.jpg",
				bannerList: [
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/1.png",
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/2.png",
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/3.png",
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/4.png"
				],
				sales: 166,
				id: 6
			}
		]
	},
	{
		name: "熟食",
		list: [
			{
				id: 1,
				name: "羊角-手撕素肉",
				desc: ``,
				unit: "80/斤左右",
				img: cosPrefix + "three-level/xiangqu/ganchangtian/goumai/tesebaijiu/3.jpg",
				sales: 65,
				url: "https://detail.tmall.com/item.htm?spm=a1z10.3-b-s.w4011-18991414854.58.16266788jmhW2f&id=523360627646&rn=78084c4a026ebf7c27da8bf8679e70ef&abbucket=3"
			},
			{
				id: 7,
				name: "武隆土猪腊肉",
				desc: `武隆独特的自然环境生长出的武隆红宝石红薯，脆甜、清香，富含蛋白质、淀粉、果胶、纤维素、氨基酸`,
				unit: "18/斤左右",
				img: cosPrefix + "three-level/xiangqu/ganchangtian/goumai/shushi/1.png",
				bannerList: [
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/1.png",
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/2.png",
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/3.png",
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/4.png"
				],
				sales: 366
			},
			{
				id: 8,
				name: "武隆碗碗羊肉",
				desc: `碗碗羊肉是发源于重庆武隆的传统名小吃。选用仙女山高寒山区无公害、无污染的天然牧场喂养出的优质本地山羊肉`,
				unit: "28/碗",
				img: cosPrefix + "three-level/xiangqu/ganchangtian/goumai/shushi/2.png",
				bannerList: [
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/1.png",
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/2.png",
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/3.png",
					cosPrefix + "three-level/xiangsu/guiyuanminsu/fengminggu/4.png"
				],
				sales: 2366
			}
		]
	}
];
</script>
<style lang="scss" scoped>
.chan-pin {
	padding: 0 320px;
	padding-bottom: 110px;
	.title {
		padding: 40px 0 20px;
		font-size: 24px;
		font-weight: 700;
		text-align: center;
	}
	.today-box {
		display: flex;
		justify-content: space-between;
		.today-item {
			.el-image {
				width: 305px;
				height: 165px;
			}
			p {
				font-size: 16px;
				text-align: center;
			}
		}
	}
	.limit-box {
		display: flex;
		justify-content: space-between;
		.limit-item {
			border: 1px solid #eeeeee;
			.el-image {
				width: 413px;
				height: 237px;
			}
			p {
				padding-left: 20px;
				font-size: 16px;
			}
		}
	}
	.box {
		.people-list {
			display: flex;
			justify-content: center;
			.name-item {
				padding: 0 20px;
				font-size: 20px;
				border-right: 1px solid #dedede;
				&:last-child {
					border: 0;
				}
				&.active,
				&:hover {
					color: #8a1313;
					cursor: pointer;
				}
			}
		}
		.people-list-item {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 20px;
			.people-item {
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				width: 620px;
				height: 550px;
				padding: 20px;
				margin-bottom: 40px;
				border: 1px solid #dedede;
				.cover {
					width: 100%;
					height: 320px;
				}
				.banner-box {
					position: relative;
					box-sizing: border-box;
					width: 100%;
					height: 320px;
					.b-img {
						width: 100%;
						height: 100%;
					}
					:deep(.el-carousel__indicators) {
						display: flex;
						justify-content: center;
						width: 100%;
						padding-bottom: 18px;
						.el-carousel__indicator {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 12px;
							height: 12px;
							padding: 0;
							margin-right: 20px;
							background-color: rgba($color: #101010, $alpha: 60%);
							border-radius: 50%;
							.el-carousel__button {
								width: 4px;
								height: 4px;
								background-color: #ffffff;
								border-radius: 50%;
							}
						}
					}
					:deep(.el-carousel__arrow) {
						width: 32px;
						height: 100px;
						background-color: rgba($color: #ffffff, $alpha: 40%);
						border: 0;
						border-radius: 0;
						&.el-carousel__arrow--right {
							right: 0;
						}
						&.el-carousel__arrow--left {
							left: 0;
						}
						.el-icon svg {
							width: 25px;
							height: 25px;
							background-size: 25px 25px;
						}
					}
				}
				.info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title {
						display: flex;
						justify-content: space-between;
						padding: 20px 0;
						margin: 0;
						span {
							font-size: 20px;
						}
						.good {
							display: flex;
							flex-wrap: nowrap;
							img {
								width: 12px;
								height: 12px;
								margin-right: 8px;
								&:last-child {
									margin: 0;
								}
							}
						}
					}
					.desc {
						height: 60px;
						margin-bottom: 20px;
						font-size: 16px;
						line-height: 30px;
						color: #666666;
					}
					.price {
						display: flex;
						justify-content: space-between;
						font-size: 16px;
						color: $theme-color;
						.btn {
							border-radius: 0;
						}
					}
				}
			}
		}
	}
}

@media all and (max-width: 750px) {
	.chan-pin {
		padding: 16px;
		.title {
			padding-top: 16px;
		}
		.today-box,
		.limit-box {
			flex-wrap: wrap;
			.today-item,
			.limit-item {
				width: 47.5%;
				margin-right: 5%;
				&:nth-child(2n) {
					margin-right: 0;
				}
				.el-image {
					width: 100%;
				}
			}
		}
	}
	.people-item {
		height: auto !important;
	}
	.desc {
		height: auto !important;
	}
}
</style>
